<!-- container box 嵌套 box -->
<template>
  <div class="nesting-component">
    <el-row>
      <el-col :span="24">
        <div style="text-align:left;">
          <el-divider content-position="left">操作</el-divider>
          <el-button v-if="!component && !formDataItem && nesting === false" @click.stop="chooseMind" size="mini"><i
              class="el-icon-back"></i> 返回
          </el-button>
          <el-button v-if="!component && !formDataItem && componentType !== 0 && nesting === false"
            @click.stop="addComponent" type="primary" size="mini">
            确定
          </el-button>
          <el-button v-if="showEditor" @click.stop="editorComponent" type="primary" size="mini">更换
          </el-button>
          <el-button v-if="(component || formDataItem) && nesting === false" @click.stop="clearContainerBoxComponent"
            type="warning" size="mini">
            清空
          </el-button>
          <el-tooltip v-if="(component || formDataItem) && componentType !== 0" class="item" effect="dark"
            content="该容器组件内，顶部追加展示组件" placement="bottom-start">
            <el-button @click.stop="appendComponent(0)" type="primary" plain size="mini">
              <i class="el-icon-upload2"></i> 追加
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="(component || formDataItem) && componentType !== 0" class="item" effect="dark"
            content="该容器组件内，底部追加展示组件" placement="bottom-start">
            <el-button @click.stop="appendComponent(-1)" type="primary" plain size="mini">
              <i class="el-icon-download"></i> 追加
            </el-button>
          </el-tooltip>
          <el-button v-if="(component || formDataItem) && nesting === false" @click.stop="clickCurrentComponent"
            type="success" plain size="mini">
            编辑当前组件
          </el-button>
        </div>
        <el-divider content-position="left">筛选</el-divider>
        <el-form>
          <el-form-item label="展示组件类型" :label-width="formLabelWidth" style="margin-bottom: 0px;">
            <el-select size="mini" v-model="componentCateType" placeholder="请选择">
              <el-option label="全部" :value="0">
              </el-option>
              <el-option v-for="cateType in componentCateTypes" :key="cateType.cate" :label="cateType.name"
                :value="cateType.cate">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-divider content-position="left">组件选择</el-divider>
        <div class="component-list">
          <el-scrollbar style="height:100%;">
            <el-radio-group v-model="componentType" style="display:flex;flex-wrap:wrap;" size="small">
              <el-radio v-for="comp in componentTypesFilter(componentCateType)" :key="comp.id"
                style="margin:8px 0 0 10px;min-width:122px;" :label="comp.id" border>{{comp.name}}</el-radio>
            </el-radio-group>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    // 当前是否存在嵌套
    nesting: {
      type: Boolean
    },
    // 调用方法所需参数
    containerData: {
      type: Object
    },
    // 显示组件列表数据
    componentTypes: {
      type: Array
    },
    // 表单组件
    formDataItem: {
      type: Object
    },
    // 组件数据
    component: {
      type: Object
    },
    // 方法
    chooseMind: {
      type: Function
    },
    // 方法
    editorComponent: {
      type: Function
    },
    clearContainerBoxComponent: {
      type: Function
    },
    // 方法
    appendComponent: {
      type: Function
    },
    // 方法
    clickCurrentComponent: {
      type: Function
    },
    // 方法
    chooseForm: {
      type: Function
    },
    // 关闭整个容器编辑弹窗
    close: {
      type: Function
    }
  },
  computed: {
    ...mapState([
      'design'
    ]),
    defaultComponentType () {
      if (this.component) {
        let typename = this.component.type
        let componentTypeData = this.design.ref.contentWindow.vueFunc.getComponentIdByType(typename)
        if (componentTypeData) {
          return componentTypeData.id
        }
      }
      if (this.formDataItem) {
        return -1
      }
      return null
    },
    showEditor () {
      if (this.component && this.componentType !== 0 && this.defaultComponentType !== null && this.defaultComponentType !== this.componentType && this.nesting === false) {
        return true
      } else if (this.formDataItem && this.nesting === false) {
        return true
      }
      return false
    },
    componentTypesFilter () {
      let _this = this
      return function (_componentCateType) {
        return _this.componentTypes.filter(item => _componentCateType === 0 || _componentCateType === item.cateType)
      }
    }
  },
  data () {
    return {
      formLabelWidth: '120px',
      componentType: 0,
      // 展示组件分类
      componentCateType: 0,
      // 展示组件分类种类
      componentCateTypes: [
        { cate: 1, name: '基础组件' },
        { cate: 2, name: '系统组件' },
        { cate: 3, name: '高级组件' },
        { cate: 4, name: '专业组件' }
      ]
    }
  },
  methods: {
    init () {
      if (this.component) {
        let typename = this.component.type
        let componentTypeData = this.design.ref.contentWindow.vueFunc.getComponentIdByType(typename)

        if (componentTypeData) {
          this.componentType = componentTypeData.id
        }
      }
      if (this.formDataItem) {
        this.componentType = -1
      }
    },
    getComponentType () {
      return this.componentType
    },
    // 添加 component 到容器组件中
    addComponent () {
      let componentType = this.getComponentType()
      if (componentType === -1) {
        this.chooseForm()
        return
      }
      if (componentType < 1) {
        this.$message.error('请选择的组件类型！')
        return
      }
      this.design.ref.contentWindow.vueFunc.addComponent(this.containerData, componentType)
      this.close()
    }
  }
}
</script>

<style scoped>
.nesting-component .component-list {
  height: 168px;
}
.nesting-component .component-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
<style>
.nesting-component .component-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
